<template>
  <div  class="app-container">
    <div style="margin-bottom: 10px;font-size: 10px;">选择：{{baseMap.hosname}}/{{depname}}/{{workDate}}</div>
    <el-container  style="height:  100%">
      <el-aside  width="200px"  style="border:  1px  silver  solid">
        <!--  部门  -->
        <el-tree :data="deptList" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick"/>
      </el-aside>
      <el-main  style="padding:  0  0  0  20px;">
        <el-row  style="width:  100%">
        <!--  排班日期  分页  -->
          <el-tag v-for="(item,index) in bookingScheduleList" :key="item.id" @click="selectDate(item.workDate,index)" :type=" index == activeIndex?'':'info'" style="height: 60px; margin-right: 5px; margin-right: 15px; cursor: pointer;">
            {{item.workDate}}{{item.dayOfWeek}}<br/>
            {{item.availableNumber}}/{{item.reservedNumber}}
          </el-tag>
          <!--分页-->
          <el-pagination :current-page="page" :total="total" :page-size="limit" class="pagination" layout="prev,pager,next" @current-change="getPage"/>
        </el-row>
        <el-row  style="margin-top:  20px;">
        <!--  排班日期对应的排班医生  -->
          <el-table  :data="scheduleList" border fit highlight-current-row>
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="职称" width="150">
            <template slot-scope="scope">
              {{scope.row.title}} | {{scope.row.docname}}
            </template>
            </el-table-column>
            <el-table-column label="号源时间" width="80">
              <template slot-scope="scope">
                {{scope.row.workTime == 0 ? "上午" : "下午"}}
              </template>
            </el-table-column>
            <el-table-column prop="reservedNumber" label="可预约数" width="80"/>
            <el-table-column prop="availableNumber" label="剩余预约数" width="100"/>
            <el-table-column prop="amount" label="挂号费(元)" width="90"/>
            <el-table-column prop="skill" label="擅长技能"/>
          </el-table>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import deptApi from "@/api/dept";
import hospApi from '@/api/hosp'
export default {
  name: 'Schedule',
  data(){
    return {
      page:1,
      total:0,
      limit:7,
      deptList:[],
      bookingScheduleList:[],
      scheduleList:[],
      baseMap:{},
      defaultProps: {
        children: 'children',
        label: 'depname'
      },
      activeIndex:0,
      depcode:null,
      depname:null,
      workDate:null,
      hoscode:null
    }
  },
  methods:{
    //查询医院所有科室列表
    getDeptList(hoscode){
      deptApi.getDeptList(hoscode)
        .then(result => {
          this.deptList = result.data
          // 默认选中第一个
          if(this.deptList.length > 0){
            this.depcode = this.deptList[0].children[0].depcode
            this.depname = this.deptList[0].children[0].depname
            this.getPage()
          }

        })
      .catch(error => {
        this.$message.error('抱歉，获取排班信息失败，请与IT管理员联系');
      })
    },
    handleNodeClick(data){
      if (data.children !=null)return
      this.depcode = data.depcode
      this.depname = data.depname
      this.getPage(1)
    },
    selectDate(workDate,index){
      this.workDate = workDate
      this.activeIndex = index
      this.getScheduleDetail()
    },
    getPage(page =1){
      this.page = page
      this.workDate = null
      this.activeIndex = 0
      this.getScheduleRule()
    },
    getScheduleRule(){
      hospApi.getScheduleRule(this.page,this.limit,this.hoscode,this.depcode)
      .then(result => {
          this.bookingScheduleList = result.data.scheduleList
          this.total = result.data.total
          this.baseMap = result.data.baseMap
          //分页后workDate = null 默认选中第一个
          if (this.workDate == null && this.bookingScheduleList.length>0) {
            this.workDate = this.bookingScheduleList[0].workDate
          }
        this.getScheduleDetail()
      })
      .catch(error => {
        this.$message.error('抱歉，获取排班信息失败，请与IT管理员联系');
      })
    },
    //根据医院编号、科室编号和工作日期，查询排班详细信息
    getScheduleDetail(){
      hospApi.getScheduleDetail(this.hoscode,this.depcode,this.workDate)
      .then(result => {
        this.scheduleList = result.data
      })
      .catch(error => {
        this.$message.error('抱歉，获取排班详情信息失败，请与IT管理员联系');
      })
    },

    getCurDate(){
      var dateTime = new Date()
      var year = dateTime.getFullYear()
      var month = dateTime.getMonth() +1 <10 ?'0'+(dateTime.getMonth()+1):dateTime.getMonth()+1
      var date = dateTime.getDate()<10 ? '0' +dateTime.getDate() : dateTime.getDate()

      return year + '-' + month + '-' + date;
    }
  },
  created() {
    this.hoscode = this.$route.params.hoscode
    this.workDate = this.getCurDate()
    this.getDeptList(this.hoscode);
  }
}
</script>

<style >
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #409EFF !important;
  color: white;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: black;
}
</style>
